<template>
	<!-- 购物车 -->
	<view>
		<view class="details-back" @click="shutDown()"></view>
		<view class="goods-details coup-anim">
			<view class="empty" @click="empty_data()">
				<image src="/static/tab/qingkong.svg" mode="widthFix"></image>
				<text>清空已点</text>
			</view>
			<!-- 商品列表 -->
			<block v-for="(item,index) in shopping_card" :key="index">
				<view class="goods-list" v-if="item.good_item.quantity !== 0">
					<view class="goods-list-image">
						<image :src="item.good_item.image[0].url" mode="aspectFill"></image>
					</view>
					<view class="goods-list-name">
						<view>{{item.good_item.name}}</view>
						<view class="list-text">
							<text>¥</text>
							<text>{{item.good_item.quantity*item.good_item.unitprice}}</text>
						</view>
					</view>
					<view class="goods-quantity">
						<view @click="reduce(index,item)">
							<image src="/static/tab/jianhao.png" mode="widthFix"></image>
						</view>
						<view>{{item.good_item.quantity}}</view>
						<view @click="plus(index,item)">
							<image src="/static/tab/jia.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</block>
			<view style="height: 100rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: { // 数组类型
			shopping_card: Array
		},
		onLoad() {},
		methods: {
			// 关闭父组件的弹窗
			shutDown() {
				// 调用父组件的pop_Shopping()
				this.$parent.pop_Shopping()
			},
			// 加
			plus(index, item) {
				const QU = item.good_item.quantity + 1
				// 调用购物车商品加减数量
				this.$parent.child_reduce_plus(index, QU, item)
			},
			// 减
			reduce(index, item) {
				const QU = item.good_item.quantity - 1
				this.$parent.child_reduce_plus(index, QU, item)
			},
			// 清空已点
			empty_data(){
				this.$parent.empty_data()
			}
		}
	}
</script>

<style scoped>
	@import '../../../style/shadow.css';

	.empty image {
		width: 25rpx;
		height: 25rpx;
		display: block;
		padding-right: 10rpx;
	}

	.empty {
		font-size: 25rpx;
		color: #aaaaaa;
		height: 90rpx;
		border-bottom: 1rpx solid #f2f2f2;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin: 0 20rpx;
	}

	.goods-list-image image {
		display: block;
		width: 130rpx;
		height: 130rpx;
		border-radius: 10rpx;
	}

	.goods-quantity image {
		display: block;
		width: 50rpx;
		height: 50rpx;
	}

	.goods-quantity {
		display: flex;
		align-items: center;
		align-self: flex-end;
		width: 200rpx;
		justify-content: space-between;
	}

	.goods-list {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 130rpx;
		font-size: 30rpx;
		margin: 25rpx 0 45rpx 0;
	}

	.goods-list-name {
		flex: 1;
		position: relative;
		padding: 0 20rpx;
	}

	.list-text text {
		display: block;
	}

	.list-text {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 0;
	}

	.list-text text:nth-child(1) {
		font-size: 25rpx;
		padding-right: 5rpx;
	}
</style>